<template>
	<svg class="svg-icon" aria-hidden="true" :class="$attrs.class">
		<use :xlink:href="iconName" :fill="color"></use>
	</svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
interface IProps {
	name?: string
	color?: string
}

const props = withDefaults(defineProps<IProps>(), {
	name: '',
	color: '#333'
})

console.log('%c [  ]-19', 'font-size:13px; background:pink; color:#bf2c9f;', props.color)

const iconName = computed(() => {
	return `#icon-${props.name}`
})
</script>

<style scoped>
.svg-icon {
	display: flex;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>
